<template>
	<view class='content'>
		<!-- 图片合成书册页 -->
		<canvas class="canvas-target-book" id="canvas-target-book" ref="canvasRefBook" :style="{
		        width: img_width + 'px',
		        height: img_height + 'px',
		        right: -(img_width + SCREEN_WIDTH) + 'px',
		    }" canvas-id="canvas-target-book"></canvas>
	</view>
</template>

<script>
	const sysInfo = uni.getSystemInfoSync();
	const isIphoneX =
		sysInfo.model.search("iPhone X") !== -1 ||
		sysInfo.model.search("iPhone 11") !== -1;
	const paddingBottom = isIphoneX ? 30 : 0;
	const bottomNavHeight = 160;
	const toolbarHeight = 40;
	const SCREEN_WIDTH = sysInfo.windowWidth;
	const SCREEN_HEIGHT = sysInfo.windowHeight - bottomNavHeight - toolbarHeight - paddingBottom - 20;
	export default {
		props: {
			pictureBookArr: {
				type: Array,
				default: []
			},
			synthIdx:{
				type:Number,
				default:0
			},
			len:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				SCREEN_WIDTH, // 图片容器宽度,
				SCREEN_HEIGHT,
				img_width: 794,
				img_height: 1123,
				ctx:null,
				bookArr:[]
			};
		},
		mounted() {
		},
		methods: {
			async save(callback) {
				let bookArr = this.pictureBookArr
				let that = this;
				this.ctx = uni.createCanvasContext('canvas-target-book', this);
				let cimg_width = 800;
				let cimg_height = 1067;
				
				that.ctx.clearRect(0, 0, this.img_width, this.img_height);
				let img_url = '';
				let img_offet_x = 0;
				let img_offet_y = 0;
				
				let scale_width = this.img_height/2 ;
				let scale_height = scale_width/(cimg_width/cimg_height);
				let scale_num = 0.5
				
				let crevice = (this.img_width-(scale_num*scale_height)*2)/2
				scale_width = scale_width - crevice/2
				this.ctx.rect(0, 0, this.img_width, this.img_height)
				this.ctx.setFillStyle('white')
				this.ctx.fill()
				let imgPromise = []
				for(let i =0;i<2;i++){
					if(i){
						img_url = bookArr[that.synthIdx].compoundImgUrl;
					}else{
						img_url = bookArr[bookArr.length- 1 - that.synthIdx].compoundImgUrl;
					}
					if(img_url)imgPromise.push(that.imgOnload(img_url))
				}
				Promise.all(imgPromise).then(res=>{
					for(let i =0;i<2;i++){
						if(i){
							img_url = bookArr[that.synthIdx].compoundImgUrl;
						}else{
							img_url = bookArr[bookArr.length- 1 - that.synthIdx].compoundImgUrl;
						}
						if(that.synthIdx%2==0){
							if(img_url){
								that.ctx.translate(this.img_width-scale_height/2, scale_width/2*(2*i+1));
								that.ctx.rotate(-(90 * Math.PI) / 180);
								that.ctx.drawImage(
									img_url,
									-((scale_num*scale_width) + crevice*i)-10,
									-((scale_num*scale_height)+(this.img_width-(scale_num*scale_height)*2)/2),
									scale_width*scale_num*2,
									scale_height*scale_num*2,
								)
								that.ctx.rotate((90 * Math.PI) / 180);
								that.ctx.translate(-(this.img_width-scale_height/2), -scale_width/2*(2*i+1));
							}
						}else{
							if(img_url){
								that.ctx.translate(scale_height/2, scale_width/2*(2*i+1));
								that.ctx.rotate((90 * Math.PI) / 180);
								that.ctx.drawImage(
									img_url,
									-((scale_num*scale_width) - crevice*i)+10,
									-((scale_num*scale_height)+(this.img_width-(scale_num*scale_height)*2)/2),
									scale_width*scale_num*2,
									scale_height*scale_num*2,
								)
								that.ctx.rotate(-(90 * Math.PI) / 180);
								that.ctx.translate(-scale_height/2, -scale_width/2*(2*i+1));
							}
						}
					}
					that.ctx.draw(false, function() {
						uni.canvasToTempFilePath({
								x: 0,
								y: 0,
								width: that.img_width,
								height: that.img_height,
								canvasId: "canvas-target-book",
								success: function(res) {
									callback && callback(res.tempFilePath)
								},
								fail(e) {
									console.error("canvasToTempFilePath",);
								},
							},
							that
						);
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>
